<template>
  <div class="body">
    <div>
      <div class="navBar">
          <NavBar title='绩效系统' :icon=true router='/my'></NavBar>
      </div>

      <div v-if="imgList.length==0">
        <div class="box">
          <div class="imgBox" @click="chooseType">
            <img src="../../assets/相机.png"/>
          </div>
        </div>
        <div class="boxText">选择照片</div>
      </div>

      <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>

      <div  v-if="imgList.length">
        <div class="add-img">
          <div class="bigImg">
            <img :src="imgList[0].file.src" class="yuImg"/>
          </div>
        </div>
        <div class="button">
          <van-button size="large" type="info" @click="confirm">确认上传</van-button>
        </div>
        <div class="button">
          <van-button size="large" type="danger" @click="cancle">取消</van-button>
        </div>
      </div>
    </div>

    
  </div>
</template>

<script>
import NavBar from '@/components/NavBar/navBar'
export default {
  components: {
    NavBar
  },
  name: 'ImageUpload',
  data () {
    return {
      imgList:[]
    }
  },
  methods:{
    chooseType() {
      document.getElementById('upload_file').click();
    },
    fileChange(el) {
      console.log(el);
      if (!el.target.files[0].size) return;
      // this.fileList(el.target);el.target.files[0]
      // el.target.value = ''
      this.fileAdd(el.target.files[0])
    },
    fileAdd(file) {
      console.log(file);
      //判断是否为图片文件
      if (file.type.indexOf('image') == -1) {
          this.$toast('请选择图片文件');
      } else {
        let reader = new FileReader();
        let image = new Image();
        let _this = this;
        reader.readAsDataURL(file);
        reader.onload = function () {
          file.src = this.result;
          _this.imgList.push({
                  file
              });
        }
      }
    },
    cancle() {
      this.$dialog.confirm({
        title: '提示',
        message: '是否取消操作'
      }).then(() => {
        // on confirm
        this.imgList = []
      }).catch(() => {
        // on cancel
      });
    },
    confirm() {
      this.$dialog.confirm({
        title: '提示',
        message: '是否确定上传'
      }).then(() => {
        // on confirm
      }).catch(() => {
        // on cancel
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .body{
    overflow: hidden;
  }
  .box{
    margin-top: 46px;
    width: 100%;
    margin-top: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .add-img{
    width: 100%;
    margin-top: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .button{
    margin: 0.5rem 1.2rem;
  }
  .bigImg{
    width: 90%;
    height: 30rem;
    background-color:rgb(223, 224, 224);
  }
  .imgBox{
    background-color: rgb(41, 40, 40);
    opacity:0.5;
    width: 10rem;
    height: 10rem;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 1px #000000;
  }
  .boxText{
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(182, 177, 177);
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: 0.2rem;
  }
  .yuImg{
    width: 100%;
    height: 100%;
  }
</style>
